<template>
  <div>
    <input
      type="text"
      v-model="todo"
      @keyup.enter="add"
    >
    <button @click='change'>修改</button>
    <ul>
      <!-- key是为了vue DOMDIFF算法存在的 ， 可以提升算法的效率 ;  业务层面 可以解决元素复用的问题-->
      <li
        v-for='(item,index) in list'
        :key='item.id'
      ><input type="checkbox">{{item.val}} <button @click='del(item)'>X</button></li>
    </ul>
    {{obj}}
  </div>
</template>
<script>
// @ is an alias to /src
export default {
  data() {
    return {
      todo: "",
      obj: { a: 111 },
      list: [
        {
          id: Math.random(),
          val: "岑氏",
        },
      ],
    };
  },
  methods: {
    change() {
      // this.list[0].val = "hello";
      // 数组的7个变异方法修改 pop push shift unshift  splice sort reverse
      // this.list[0] = {
      //   id: 666,
      //   val: "hello",
      // };
      this.list.splice(0, 1, { id: 666, val: "hello" });
      // console.log(this.list);
      // this.$forceUpdate();
      // setTimeout(() => {
      //   this.list[0].val = 666;
      //   this.$forceUpdate();
      // }, 2000);
      // this.obj.b = 666;
      // this.$forceUpdate();
      // this.$set(this.obj, "a", 666); // $set的核心原理 defineReactive$$1
      // console.log(this.$set);
      // this.obj = {
      //   ...this.obj,
      //   b: 666,
      //   c: 44,
      //   d: 777,
      // };
      console.log(this.list);
    },
    add() {
      this.list.push({
        id: Math.random(),
        val: this.todo,
      });
      this.todo = "";
    },
    del(obj) {
      console.log(obj);
      this.list = this.list.filter((item) => {
        return item.id !== obj.id;
      });
    },
  },
};
</script>
<style lang="less">
</style>